<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>秒表</title>
	</head>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
		canvas{
			border: 1px solid;
			display: block;
			background: url(body.gif);
		}
	</style>
	<body>
		<canvas id="canvas"></canvas>
	</body>
	<script type="text/javascript">
		var height=window.innerHeight-2;
		var width=window.innerWidth-2;
		
	function draw(){
		var c=document.getElementById("canvas");
		c.width=width;
		c.height=height;
		var zhoux=width/2;
		var zhouy=height/2;
		var cxt=c.getContext("2d");
		var time = new Date();
		cxt.clearRect(0,0,width,height); // clear canvas
		// 表盘
		cxt.arc(width/2,height/2,height/2,0,2*Math.PI);
		cxt.strokeStyle="gray";		
		cxt.stroke();
		cxt.save();
		// 地球
		cxt.beginPath();			
		cxt.globalCompositeOperation = 'source-over';
		cxt.translate(zhoux,zhouy);
		var gr1 = cxt.createLinearGradient(50,50,90,90);
		//添加颜色端点
		gr1.addColorStop(0,'#3f56ce');
		gr1.addColorStop(1,'#060d31'); 
		var time = new Date();
		cxt.rotate( (2*Math.PI/60)*time.getMinutes() + ((2*Math.PI)/3600)*time.getSeconds()+Math.PI);
		cxt.arc(0,150,30,0,360*Math.PI/180);	
		cxt.fillStyle=gr1;		
		cxt.fill();			
		
		// 地球阴影
		cxt.beginPath();
		cxt.globalCompositeOperation = 'destination-over';
		cxt.rect(-30,175,60,50);
		cxt.fillStyle="rgba(0,0,0,0.7)";	
		cxt.fill();
		
		// 月亮
		cxt.beginPath();	
		cxt.globalCompositeOperation = 'destination-over';
		cxt.translate(0,150);
		var time = new Date();
		cxt.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds()+Math.PI/2);
		cxt.arc(0,60,10,0,360*Math.PI/180);	
		cxt.fillStyle="#fff";		
		cxt.fill();
		
		// 地球轨道
		cxt.beginPath();
		cxt.globalCompositeOperation = 'destination-over';
		cxt.arc(0,0,60,0,360*Math.PI/180);
		cxt.strokeStyle="gray";
		cxt.stroke();
		cxt.restore();
		
		// 太阳
		cxt.beginPath();
		var gr = cxt.createRadialGradient(zhoux,zhouy,30,zhoux,zhouy,10);
		//添加颜色端点
		gr.addColorStop(0,'yellow');
		gr.addColorStop(1,'red');      
		//应用fillStyle生成渐变
		cxt.fillStyle = gr;
		cxt.arc(zhoux,zhouy,50,0,360*Math.PI/180);
		cxt.fillStyle=gr;
		cxt.fill();
		
		// 太阳轨道
		cxt.beginPath();	
		cxt.globalCompositeOperation = 'destination-over';
		cxt.arc(zhoux,zhouy,150,0,360*Math.PI/180);
		cxt.strokeStyle="gray";
		cxt.stroke();
		cxt.translate(width/2,height/2);
		for(var i=1;i<61;i++){	
			cxt.save();
			cxt.beginPath();
			cxt.rotate((2*Math.PI/60)*i);
			cxt.moveTo(-height/2,0);		
			
			if(i%5==0){
				cxt.lineTo(-height/2+30,0);
				cxt.strokeStyle="#f08";
				cxt.lineWidth=4;
				cxt.font="30px 黑体";
				cxt.fillStyle="#fff";
				cxt.fillText(i/5,-10,-height/2+60);
			}else{
				cxt.lineTo(-height/2+20,0);
				cxt.strokeStyle="#999";
				cxt.lineWidth=2;
			}		
			
			cxt.stroke();
			cxt.restore();
		}
		cxt.save();
		// 秒针	
		cxt.beginPath();			
		cxt.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds());
		cxt.moveTo(0,0);		
		cxt.lineTo(0,-5*height/11)
		cxt.lineWidth=2;
		cxt.strokeStyle="blue";		
		cxt.stroke();
		cxt.restore();
		// 分针
		cxt.save();
		cxt.beginPath();
		cxt.rotate( (2*Math.PI/60)*time.getMinutes() + ((2*Math.PI)/3600)*time.getSeconds());
		cxt.moveTo(0,0);
		cxt.lineTo(0,-height/3)
		cxt.lineWidth=4;
		cxt.strokeStyle="green";
		cxt.stroke();
		cxt.restore();
		// 时针
		cxt.save();
		cxt.beginPath();
		cxt.rotate( (2*Math.PI/12)*(time.getHours()-12) + ((2*Math.PI)/720)*time.getMinutes());
		cxt.moveTo(0,0);
		cxt.lineTo(0,-height/4)
		cxt.lineWidth=6;
		cxt.strokeStyle="red"
		cxt.stroke();

		cxt.restore();
		cxt.beginPath();
		cxt.arc(0,0,10,0,2*Math.PI);
		cxt.fillStyle="yellow";
		cxt.fill();
		
		
		
		window.requestAnimationFrame(draw);
	}
	window.requestAnimationFrame(draw);
	</script>
</html>
